
<template>
  <div style="position: relative;">
        {{value.name}}
        <el-button type="text" v-if='value.status===1' @click="stopUpload">暂停</el-button>
        <el-button type="text" v-if='value.status===2' @click="resumeUpload">继续上传</el-button>
        <i class="el-icon-close"  style="position: absolute;right: 5px; top: 14px; cursor: pointer;"  @click="deleteFile(value.name)"></i>
        <el-progress :percentage="value.progress"  v-if='value.status===2' status="warning"></el-progress>
        <el-progress :percentage="value.progress" v-else ></el-progress>
    </div>
</template>
<script>
const OSS = require('ali-oss');
// var keyRes = undefined;
// try {
//   getFileKey().then(res=>{console.log(res,"res");keyRes = res});
//   console.log(keyRes,"keyRes");
// } catch (error) {
//   console.log("获取文件服务报错",error)
// }
// console.log(keyRes,"keyRes");
// const accessKeyId = keyRes?keyRes.accessKeyId:'111';
// const accessKeySecret = keyRes?keyRes.accessKeySecret:'111';
// 程亮配置
// const client = new OSS({
//   region: 'oss-cn-beijing',
//   accessKeyId: 'LTAI4FcEePgXk8SE8EceG8sF',
//   accessKeySecret: 't5SB2hSS4ISsjTnbDqhXACgF8vhD2s',
//   bucket: '20191023'
// });

//客户给的
// const client = new OSS({
//   region: 'oss-cn-beijing',
//   accessKeyId: accessKeyId,
//   accessKeySecret: accessKeySecret,
//   bucket: 'bjev-cms-oss-bucket'
// });

// const resumeClient = new OSS({
//   region: 'oss-cn-beijing',
//   accessKeyId: accessKeySecret,
//   accessKeySecret: accessKeySecret,
//   bucket: 'bjev-cms-oss-bucket'
// });
// import { getFileKey } from '@/api/common/auth/downloadCenter/index.js';
//配置不可以修改 ，客户的oss
export default {
  name: 'upload-file',
  props: {
    value: {
      required: true,
      default: []
    },
    partSize:{
      type:Number,
      default:1024*100
    },
    root:{
      type:String,
      default:''}
  },
  data() {
    this.resumeClient = {}
    this.client = {}
    return {
      fileCheckPoint:{},
      size:0
    };
  },
   created(){
    console.log("creat:::");
    let keyRes = undefined;
    try {
      // getFileKey().then(res=>{console.log(res,"res");keyRes = res});
      //console.log(keyRes,"keyRes");
    } catch (error) {
      //console.log("获取文件服务报错",error)
    }
    //console.log(keyRes,"keyRes");
    const accessKeyId = keyRes?keyRes.accessKeyId:'111';
    const accessKeySecret = keyRes?keyRes.accessKeySecret:'111';
    this.client = new OSS({
      region: 'oss-cn-beijing',
      accessKeyId: accessKeyId,
      accessKeySecret: accessKeySecret,
      bucket: 'bjev-cms-oss-bucket'
    });

    this.resumeClient = new OSS({
      region: 'oss-cn-beijing',
      accessKeyId: accessKeyId,
      accessKeySecret: accessKeySecret,
      bucket: 'bjev-cms-oss-bucket'
    });
  },
  mounted() {
    if(this.value.progress!==100){
      this.doUpload()
    }
  },
  methods: {
    //选择文件
    doUpload() {
      this.size = this.value.file[0].size;

      this.multipartUpload(this.value.file[0].name, this.value.file[0]);
    },
    //分页上传
    multipartUpload(upName, upFile) {
      let _this = this;
      const fileSize=Math.floor(upFile.size / 1024)
      const progress = async function(percentage, checkpoint, res) {
        _this.fileCheckPoint=checkpoint
        _this.value.status =1
        //进度
        _this.value.progress = Math.ceil(percentage=== 0 ? 0.1 : percentage * 100);
      };
      try {
        let result = this.client.multipartUpload(this.root+upName, upFile, {
            progress: progress,
            headers: {
            		Expires: 1000*60*60
            },
            parallel:3,
            partSize:fileSize<100?1024:_this.partSize, //设置分片上传
            meta: {
              year: 2019,
              people: 'test'
            }
          })
          .then(res => {
            if (res.res.status === 200) {  //成功
              _this.successFun(res)
            }else{
               console.log(res);
               _this.value.status =2
            }
          })
          .catch(err => {
            _this.value.status =2
            console.log('err====>', err);
          });
      } catch (e) {
        // 捕获超时异常
        if (e.code === 'ConnectionTimeoutError') {
          console.log('Woops,超时啦!');
        }
         _this.value.status =2
        //console.log(e);
      }
    },
    //上传成功
    successFun(res){
      this.value.status = 0;
      if(this.root===''){ //上传文件目录
        this.value.name = res.name
      }else{
        this.value.name = res.name.replace(this.root, '');
      }
      this.value.size = this.size;
      // this.value.url = res.res.requestUrls[0].split('?')[0];
      this.value.url = this.client.signatureUrl(res.name)
      this.$parent.retrunData(this.value)
      // let head = client.head(upName);
    },
    // 恢复 继续上传
   resumeUpload () {
     let _this = this;
      if(!_this.fileCheckPoint.hasOwnProperty('file')){
         this.$confirm('上传中的文件已经损坏，请重新尝试', '提示', {
					confirmButtonText: '确定',
					type: 'error'
				}).then(async() => {
			    _this.value.status =0
          _this.stopUpload()
          _this.$parent.deleteOneFile(_this.value.file[0].name,1);
				}).catch(() => {});
        return
      }
      _this.value.status =1
      let files=_this.fileCheckPoint
      // console.log('继续上传文件',this.fileCheckPoint)
      const progress = async function(percentage,checkpoint,res) {
          _this.fileCheckPoint=checkpoint
          //进度
          _this.value.progress = Math.ceil(percentage=== 0 ? 0.1 : percentage * 100);
        };
        try {
          let result = this.resumeClient.multipartUpload(files.name, files, {
              progress:progress,
              checkpoint: _this.fileCheckPoint,
              meta: { year: 2017, people: 'test' }
        })
        .then(res => {
              if (res.res.status === 200) {
                _this.successFun(res)
              }else{
                //console.log(res);
                _this.value.status =2
              }
            })
           .catch(err => {
            _this.value.status =2
            //console.log('err====>', err);
          });
        } catch (e) {
          //console.log(e);
          _this.value.status =2
        }
    },
    //暂停
    stopUpload(){
      this.value.status =2
      this.client.cancel();
      this.resumeClient.cancel();
    },
    //删除文件
    deleteFile(name) {
      this.$confirm('是否确定删除吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async() => {
					this.value.status =0
          this.stopUpload()
          this.$parent.deleteOneFile(name,1);
          try {
            let result = await client.delete(name);
          } catch (e) {
            //console.log(e);
          }
				}).catch(() => {});
    },
  }
};
</script>
<style lang="less" scoped>
.el-progress{
  .el-progress-bar{
    padding-right: 3px !important;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    margin-right: -3px !important;
    box-sizing: border-box;
  }
}
.el-progress__text{
    position: absolute;
    top: -18px;
    right: 23px;
    color: #606266;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    line-height: 1;
}
</style>
